import type { ProDescriptionsItemProps } from '@/components/ProDescriptions';
import ProDescriptions from '@/components/ProDescriptions';
import React from 'react';
import type { DetailItem } from '../data.d';
import { Tag } from 'antd';
import { editTenantRoleAccesses } from '../service';
import AdminAccessConfiguration from './AdminAccessConfiguration';

const LockerDetail: React.FC<{
  id?: string;
  request: (id: string) => Promise<{ success: boolean; data?: DetailItem }>;
}> = ({ id = '', request }) => {
  const columns: ProDescriptionsItemProps<DetailItem>[] = [
    {
      label: '名称',
      dataIndex: 'name',
    },
    {
      label: '编号',
      dataIndex: 'id',
    },
    {
      label: '权限',
      dataIndex: 'accesses',
      editable: true,
      render: (_, record) => record?.accesses?.map((item) => <Tag key={item.id}>{item.name}</Tag>),
      renderEdit: (_, { value, onChange }) => (
        <AdminAccessConfiguration
          defaultValue={value}
          id={id}
          onChange={(values) => onChange && onChange(values)}
        />
      ),
      onSubmit: async (val) => {
        const res = await editTenantRoleAccesses({ id, accesses: val });
        return res.code === 0;
      },
    },
  ];

  return (
    <ProDescriptions
      title="客户角色详情"
      column={2}
      columns={columns}
      params={{ id }}
      request={(params) => request(params.id)}
    />
  );
};

export default LockerDetail;
